<template>
  <div>
    <!-- 搜索框 -->
    <div  class="my-search-search">
      <!-- 左按钮 -->
      <div class="my-search-back">
        <router-link to="/">
          <button>
            <van-icon name="arrow-left" slot="left" />
          </button>
        </router-link>
      </div>
      <!-- 右输入框 -->
      <van-search class="my-search-van-search" type="search" v-model="value" slot="left" placeholder="搜索医生、科室、医院、疾病" @input="searchAction($event)" />
      <router-link :to="{path:'/',query:{setitle:this.inputValue}}"
        slot="right" v-if="this.inputValue.length>0">
      </router-link>
      <!-- <div class="sousuo" slot="right" v-else>搜索</div> -->
      <div>
        <ul>
          <li
            v-for="(item, i) in searchResult"
          :key="i"
          class="searchResult"
          @click="jump($event)"
        >
          <p class="my-search-van-search-p">{{ item.setitle }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data (){
    return {
      value:'',
      searchResult: [], //保存搜索到的菜谱结果
      datas: [], //保存所有的菜谱信息
      inputValue: "",
    }
  },
  methods:{
    datasAll() {
      this.axios.get("/search/AllData").then((result) => {
        // console.log(result); //所有数据
        this.data = result.data.data;
      });
    },
    searchAction(e) {
      // console.log(e) //这个是搜索的值
      // 过滤datas保存的所有信息，如果datas内包含输入的值那么久返回这个名，把匹配的菜谱名保存到searchResult数组
      this.searchResult = this.data.filter((item) => {
        // if (item.setitle.includes(inputValue) && inputValue.length > 0) {
        if (item.setitle.includes(e) && e.length > 0) {
          // 返回搜索到的数据
          return item;
        }
      });
    },
    jump(e){

      let index = e.target.innerHTML;
      if(index=='如何做好疫情防控？'){
        this.$router.push({
          path:'/detail',
          query:{did:1},
        });
      }else if(index=='疫苗接种后，这件事要做好'){
        this.$router.push({
          path:'/detail',
          query:{did:2},
        });
      }else if(index=='疫情期间，外卖，快递如何取更安全？'){
        this.$router.push({
          path:'/detail',
          query:{did:3},
        });
      }else if(index=='拦住问题宝宝，你需要闯过这三关'){
        this.$router.push({
          path:'/detail',
          query:{did:4},
        });
      }else if(index=='打疫苗之前，先看这一篇|世界免疫周'){
        this.$router.push({
          path:'/detail',
          query:{did:5},
        });
      }else if(index=='接种新冠疫苗后多久能产生抗体？'){
        this.$router.push({
          path:'/detail',
          query:{did:6},
        });
      }else if(index=='干货|原来疫苗有这么多种！'){
        this.$router.push({
          path:'/detail',
          query:{did:7},
        });
      }else if(index=='孕妇需要补充那些维生素？'){
        this.$router.push({
          path:'/detail',
          query:{did:8},
        });
      }else if(index=='自费疫苗到底有必要打吗？'){
        this.$router.push({
          path:'/detail',
          query:{did:9},
        });
      }else if(index=='新冠疫苗接种，一组图带你全看懂'){
        this.$router.push({
          path:'/detail',
          query:{did:10},
        });
      }else if(index=='想要少生病？那你应该来看看这个'){
        this.$router.push({
          path:'/detail',
          query:{did:11},
        });
      }else if(index=='想有个聪明宝宝？这个检查一定要做'){
        this.$router.push({
          path:'/detail',
          query:{did:12},
        });
      }else if(index=='宝宝发烧，血常规结果说明了啥？'){
        this.$router.push({
          path:'/detail',
          query:{did:13},
        });
      }else if(index=='你为什么要接种疫苗？关于疫苗的误区'){
        this.$router.push({
          path:'/detail',
          query:{did:14},
        });
      }else if(index=='没按时接种第二针怎么办'){
        this.$router.push({
          path:'/detail',
          query:{did:15},
        });
      }else if(index=='万众一心，防控疫情'){
        this.$router.push({
          path:'/detail',
          query:{did:16},
        });
      }else if(index=='接种疫苗后产生抗体时间'){
        this.$router.push({
          path:'/detail',
          query:{did:17},
        });
      }else if(index=='疫情期间，如何安全取快递'){
        this.$router.push({
          path:'/detail',
          query:{did:18},
        });
      }else if(index=='孕妈妈需要经历的三关，拥有健康宝宝'){
        this.$router.push({
          path:'/detail',
          query:{did:19},
        });
      }else if(index=='了解疫苗知识，避免过敏症状'){
        this.$router.push({
          path:'/detail',
          query:{did:20},
        });
      }else if(index=='接种新冠疫苗后多久能产生抗体？'){
        this.$router.push({
          path:'/detail',
          query:{did:21},
        });
      }else if(index=='疫苗的种类，原来这么多！'){
        this.$router.push({
          path:'/detail',
          query:{did:22},
        });
      }else if(index=='了解自费疫苗知识，及时预防'){
        this.$router.push({
          path:'/detail',
          query:{did:23},
        });
      }
    }
  },
  mounted() {
    this.datasAll();
  },
}
</script>
<style scoped>
.my-search-search {
  background-color: #68c49a;
  height: 2.6rem;
}
.my-search-back {
  float: left;
}
.my-search-back button {
  background-color: #68c49a;
  height: 2.6rem;
  border: 0;
}
.van-field__left-icon {
  margin-top: -5px;
}
.my-search-van-search{
  background-color: #68c49a;
  padding: .55rem;
}
.my-search-van-search-p{
  text-indent: 2em;
  margin: .625rem;
  line-height: .9375rem;
  font-size: 18px;
}
</style>
